<template>
    <div class="login">

        <el-form :model="ruleForm" status-icon class="demo-ruleForm">
            <h1>欢迎登录 - MMALL管理系统</h1>
            <el-form-item>
                <el-input type="text" v-model="ruleForm.username" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item>
                <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" class="block" @click="login">登录</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { login } from "@/utils/api";
export default {
    data() {
        return {
            ruleForm: {
                username: "admin",
                password: "admin",
            },
        };
    },
    methods: {
        login() {
            login(this.ruleForm).then((res) => {
                console.log(res);
                if (res.data.status == 0) {
                    this.$message({
                        message: "恭喜你，登录成功",
                        type: "success",
                    });
                    localStorage.token = JSON.stringify({
                        username: this.ruleForm.username,
                        time: new Date().getTime(),
                        prescription: 1000*60*30 , //失效时间 30分钟 
                    });
                    this.$router.push("/home");
                }
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.login {
    width: 100%;
    height: 100%;
    background-color: rgba($color: #000000, $alpha: 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    h1{
        text-align: center;
        font-weight: normal;
        // margin: 0;
    }
    .el-form {
        width: 500px;
        background-color: #fff;
        padding:20px 50px;
    }
    .el-form-item {
        padding: 0 10px;
    }
    .el-button {
        width: 100%;
    }
}
</style>